<template>
	<view class="SearchBox">
		<u-navbar height="100rpx" title=" " :placeholder="true" :auto-back="true">
			<view class="u-nav-slot" slot="center">
				<view class="search_box">
					<view class="search_content">
						<u-search @search="search" @custom="search" :action-style="searchAction" height="60rpx" search-icon-color="#45B9A2" bgColor="#f2f2f2" search-icon-size="28" placeholder="请输入线路或目的地"></u-search>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="search_body">
			<view class="record_box">
				<view class="record_title">历史记录</view>
				<view class="flex_box flex_wrap record_content">
					<view @click="search(item)" v-for="(item,index) in historyList" :key="index" class="record_item">{{item}}</view>
				</view>
			</view>
			<view class="circuit_box">
				<view class="circuit_title">
					<u-divider line-color="#45B9A2" text-color="#45B9A2" text="推荐"></u-divider>
				</view>
				<view class="circuit_main">
					<view class="circuit_main">
						<view @click="$goUrl('/pages/home/circuit/detail','to',{id: item.id})" v-for="(item,index) in list" :key="index" class="circuit_item">
							<u-image width="100%" height="380rpx" mode="aspectFill" :src="item.image"></u-image>
							<view class="circuit_content">
								<view class="circuit_name u-line-2">{{item.title}}</view>
								<view class="circuit_sub u-line-2">{{item.ticket}}</view>
								<view class="flex_box flex_row_between circuit_price">
									<view class="flex_box">
										<view class="circuit_price_num">￥<text>{{item.price}}</text></view>
										<view class="circuit_price_name">会员价</view>
										<view class="circuit_price_text">￥{{item.money}}</view>
									</view>
									<view class="circuit_price_sale">已售{{item.ballot}}</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="listStatus==='nomore'&&list.length===0" class="empty_box">
						<u-empty mode="address" icon="/static/empty/address.png" text="暂无线路推荐"></u-empty>
					</view>
					<block v-else>
						<u-loadmore :line="true" @loadmore="getMore" :status="listStatus"></u-loadmore>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getInfo,
		circuitList,
	} from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				searchAction: {width: '100rpx',background: '#45B9A2',color: '#ffffff',fontSize: '24rpx',height: '46rpx',fontWeight: 'bold',textAlign: 'center',lineHeight: '46rpx',borderRadius: '30rpx'},
				params: {
					page: 1,
					category_id: '',
					characteristic: 3
				},
				list: [],
				listStatus: "loading",
			}
		},
		onLoad() {
			that = this;
			console.log(that.historyList)
			that.getList();
		},
		onReachBottom() {
			that.getMore();
		},
		methods: {
			// 获取列表
			getList(){
				circuitList(that.params).then(res => {
					let list = res.data.data;
					that.listStatus = list.length < res.data.per_page ? "nomore" : "loadmore";
					that.list = [...that.list,...list];
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			// 点击加载更多
			getMore(){
				that.listStatus==="loadmore"&&(that.params.page++,that.listStatus = "loading",that.getList());
			},
			search(e){
				if(that.historyList.indexOf(e) < 0) that.historyList.push(e)
				uni.$u.vuex('historyList', that.historyList);
				that.$goUrl('/pages/home/circuit/circuit','redirect',{search: e});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.SearchBox{
		min-height: 100vh;
		background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FA 100%);
		.search_box{
			width: 678rpx;
			/* #ifdef MP-WEIXIN */
			padding: 0 150rpx 0 40rpx;
			/* #endif */
			.search_content{
				width: 100%;
				height: 100%;
				border-radius: 36rpx;
				background-color: #f2f2f2;
				padding-right: 10rpx;
			}
		}
		.search_body{
			padding: 0 36rpx;
			.record_box{
				padding:30rpx 0 0;
				.record_title{
					font-size: 28rpx;
					color: #1E272E;
					font-weight: bold;
					line-height: 40rpx;
				}
				.record_content{
					padding: 24rpx 0 0;
					.record_item{
						height: 56rpx;
						border-radius: 28rpx;
						border: 2rpx solid #e5e5e5;
						padding: 0 24rpx;
						font-size: 28rpx;
						color: #1E272E;
						line-height: 56rpx;
						margin: 0 24rpx 24rpx 0;
					}
				}
			}
			.circuit_box{
				padding: 0 0 24rpx;
				.circuit_title{
					padding: 20rpx 144rpx 0;
				}
				.circuit_main{
					padding: 0 0 1rpx;
					.circuit_item{
						background: #FFFFFF;
						box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
						border-radius: 12rpx;
						overflow: hidden;
						margin-bottom: 24rpx;
						.circuit_img{
							width: 260rpx;
							height: 260rpx;
							position: relative;
							border-radius: 12rpx;
							overflow: hidden;
							.circuit_class{
								position: absolute;
								top: 0;
								left: 0;
								z-index: 2;
								min-width: 112rpx;
								max-width: 260rpx;
								height: 36rpx;
								line-height: 36rpx;
								font-size: 24rpx;
								color: #ffffff;
								font-weight: 500;
								padding: 0 12rpx;
								background: #FF3F34;
								border-radius: 12rpx 0rpx 12rpx 0rpx;
							}
						}
						.circuit_content{
							padding: 24rpx;
							.circuit_name{
								font-size: 28rpx;
								font-weight: bold;
								color: #1E272E;
								line-height: 40rpx;
								max-height: 80rpx;
								margin-bottom: 16rpx;
							}
							.circuit_sub{
								font-size: 24rpx;
								font-weight: 500;
								color: #808E9B;
								line-height: 36rpx;
								max-height: 72rpx;
								margin-bottom: 16rpx;
							}
							.circuit_price{
								height: 50rpx;
								.circuit_price_num{
									font-size: 24rpx;
									color: #45B9A2;
									font-weight: bold;
									text{
										font-size: 32rpx;
									}
								}
								.circuit_price_name{
									width: 88rpx;
									height: 32rpx;
									background: #45B9A2;
									border-radius: 0 16rpx 16rpx 16rpx;
									text-align: center;
									line-height: 32rpx;
									font-size: 20rpx;
									line-height: 32rpx;
									color: #FFFFFF;
									margin-left: 10rpx;
								}
								.circuit_price_text{
									font-size: 24rpx;
									color: #666666;
									margin-left: 24rpx;
									text-decoration: line-through;
								}
								.circuit_price_sale{
									font-size: 24rpx;
									color: #666666;
									font-weight: 500;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
